<!-- 选择手机号前缀组件 -->
<template>
  <div class="phonePrefix">
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
      close-icon-position="top-left"
      :close-on-click-overlay="boolean"
      get-container=".phonePrefix"
    >
      <div class="box">
        <div class="title">
          <div class="btn_close" @click="closebles">
            <van-icon name="cross" class="closeable" />
          </div>
          <p class="tit">选择国家和地区</p>
        </div>
      </div>

      <van-index-bar :index-list="indexList" sticky>
        <div v-for="(item, index) in dataList" :key="index">
          <van-index-anchor :index="index">
            {{ index }}
          </van-index-anchor>
          <div
            v-for="(test, inde) in item"
            :key="inde"
            class="cell"
            :data-num="test[1]"
            @click="getPhoneNum($event)"
          >
            <span>{{ test[0] }}</span>
            <span>{{ test[1] }}</span>
          </div>
        </div>
      </van-index-bar>
    </van-popup>
  </div>
</template>

<script>
import { country } from "../../util/phonePrefix";
export default {
  components: {},

  data() {
    //这里存放数据
    return {
      boolean: false,
      indexList: [],
      dataList: {},
    };
  },
  //监听属性 类似于data概念
  computed: {
    show: {
      get() {
        return this.$store.state.show;
      },
      set() {},
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //关闭手机前缀选择弹窗
    closebles() {
      this.$store.state.show = false;
    },

    //获取点击的手机号前缀,子父通信传给父组件
    getPhoneNum(e) {
      console.log(e.target.dataset.num);
      this.$emit("phoneNum", e.target.dataset.num); //自定义事件  传递值“子向父组件传值”
      this.$store.state.show = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.indexList = Object.keys(country);
    this.dataList = country;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
.phonePrefix {
  font-size: 12px;
  .box {
    margin: 0 30px 0 18px;
    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .btn_close {
        width: 29px;
        height: 30px;
        .closeable {
          font-size: 12px;
          line-height: 30px;
        }
      }

      .tit {
        font-size: 15px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
  .selsetPhone_box {
    padding-right: 20px;
  }
  .van-index-anchor {
    display: flex;
    justify-content: space-between;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    height: 48px;
    line-height: 56px;
  }
  .van-index-bar {
    margin: 0 30px 0 18px;
  }
  .cell {
    height: 40px;
    border-bottom: 1px solid #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 11px;
    span:nth-child(2) {
      font-size: 10px;
      color: #8c8c8c;
    }
  }
}
</style>
